<template>
  <div class="yy-page yy-base-employee">
    <div class="yy-page-header">
      <div class="yy-page-header_title">
        <el-button  plain icon="Plus" type="primary" @click="onOpenDialog()">新增</el-button>
      </div>
      <div class="yy-page-header_action">
        <right-toolbar :search="false" @showSearch="onShowSearch" @queryTable="getList(true)"></right-toolbar>
      </div>
    </div>
    <div class="yy-page-data">
      <WidgetTable  ref="tableDataRef" :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>

    <WidgetFormDialog ref="widgetFormDialogRef"
                      :form-fields="dialog.formFields"
                      :model-instance="dialog.modelInstance"
                      :save-api-fun="dialog.saveApiFun"
                      :update-api-fun="dialog.updateApiFun"
                      :option="{
                        businessName: '设备类型',
                    }"
                      @edit-callback="onEditCallback"
    />
  </div>
</template>

<script setup lang="ts">

import {onBeforeMount, reactive, ref} from "vue";
import {TableColumn, WidgetFormField} from "@/model/Definition";
import {BaseModel} from "@/model/BaseModel";
import {formatDate} from "@/utils/yayi";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import WidgetFormDialog from "@/components/widget/WidgetFormDialog.vue";
import DeviceCategoryApi from "@/api/broadcast/DeviceCategoryApi";
import {DeviceCategoryModel} from "@/model/DeviceCategoryModel";
import useDeviceCategoryStore from "@/store/modules/device_category";


const showSearch = ref(true)
const dialog = reactive<{formFields: WidgetFormField[],modelInstance: BaseModel, saveApiFun: any, updateApiFun: any}>({
  modelInstance: new DeviceCategoryModel(),
  saveApiFun: DeviceCategoryApi.save,
  updateApiFun: DeviceCategoryApi.update,
  formFields: [
    {field: 'name', label: '名称', type: 'text', placeholder: '请输入名称', required: [{required: true, message: '名称不能为空', trigger: 'blur'}]},
    {field: 'code', label: '代码', type: 'text', placeholder: '请输入代码', required: [{required: true, message: '代码不能为空', trigger: 'blur'}]},
    {field: 'multiRoomFlag', label: '可关联多诊室', type: 'radioGroup', initVal: 1, options: [{label: '是', value: 1}, {label: '否', value: 0}]},
    {field: 'multiDepartFlag', label: '可关联多科室', type: 'radioGroup', initVal: 1, options: [{label: '是', value: 1}, {label: '否', value: 0}]}
  ]
})

const search = reactive<{formFields: WidgetFormField[],formData: any, formButtons: any, modelInstance: BaseModel, searchApiFun:any}>({
  modelInstance: new DeviceCategoryModel(),
  searchApiFun: DeviceCategoryApi.list,
  formData: {},
  formFields: [
    {field: 'searchKey', config: {input: {clearable: true}}, placeholder:"请输入名称或编码的关键字", label: '关键字', type: 'text', style:'width: 200px;',}
  ],
  formButtons: [
    {type: 'primary', label:'搜索', icon: 'search', atClick: ()=> {
        const formData = searchFormWidget.value.getFormFieldValue()
        search.formData = Object.assign({}, formData, {searchKey: formData.searchKey?.length ? formData.searchKey : null, state: formData.state === -1 ? null : formData.state})
        getList()
      }
    },
    {type: 'default', label: '清空', icon: 'refresh', atClick: () => {
        searchFormWidget.value.resetFields()
      }
    }
  ]
})

const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: DeviceCategoryModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "align": 'center',
      "width": 60,
      "fixed": 'left'
    },
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"code",
      "label":"编码",
      "showable":true
    },
    {
      "field":"multiRoomFlag",
      "label":"关联多诊室",
      "showable":true,
      "sortable": true,
      "width": 100
    },
    {
      "field":"multiDepartFlag",
      "label":"关联多科室",
      "showable":true,
      "width": 100
    },
    {
      "field":"updateTime",
      "label":"更新时间",
      "showable":true,
      "width": 160
    },
    {
      "field":"action",
      "label":"操作",
      "width": 150,
      "showable":true,
      "sortable":false,
      "align": 'center',
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false,
    pageSize: 30,
    pageIndex: 1,
    total: 0,
    pageChange: (pageIndex: number) => {
      onPageChange(pageIndex)
    }
  },
  data: [],
  formats: {
    'multiRoomFlag': {
      labelFormat: (val) => {
        return !val ? '否': '是'
      }
    },
    'multiDepartFlag': {
      labelFormat: (val) => {
        return !val ? '否': '是'
      }
    },
    'updateTime': {
      labelFormat:  (val) =>formatDate(val)
    },
    'action': {
      items: [
        {label: '编辑',elType: 'button', value: 'edit', atClick: (data) => onOpenDialog(data)},
        {label: '删除',elType: 'button', value: 'delete',  confirm: {title: '您确定要删除吗？', atConfirm: (data) => onDelete(data)}}
      ]
    }
  }
})
const searchFormWidget = ref()
const widgetFormDialogRef = ref()
const tableDataRef = ref()

onBeforeMount(() => {
  getList()
})

const onShowSearch = () => {
  showSearch.value = !showSearch.value
  tableDataRef.value.onWindowResize()
}
const getList = (isForce: boolean = false) => {
  table.isLoading = true
  useDeviceCategoryStore().list(isForce).then((data) => {
    table.data = data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onOpenDialog = (data) => {
  widgetFormDialogRef.value.onShowDialog(data)
}

const onDelete = (data) => {
  DeviceCategoryApi.delete(data.id).then(() => {
    const index = table.data.findIndex(item => item.id === data.id);
    if (index >= 0) {
      table.paging = Object.assign({}, table.paging, {
        total: table.paging.total - 1
      })
      table.data.splice(index, 1)
    }
  })
}

const onPageChange = (pageIndex: number) => {
  if (pageIndex != table.paging.pageIndex) {
    getList(pageIndex);
  }
}

const onEditCallback = (data) => {
  const index = table.data.findIndex(item => item.id === data.id);
  if (index < 0) {
    table.data.unshift(data)
  } else {
    table.data.splice(index, 1, data)
  }
}
</script>
<style scoped lang="scss">
.yy-base-employee {
  height: 100%;
}
</style>